<template>
  <div class="animate__animated animate__fadeInDown">
    <div class="g-flex g-row-center g-col-center main-body">
      <div class="g-text-center">
        <el-button @click="changeLanguage('en-US')">English</el-button>
        <el-button @click="changeLanguage('zh-CN')">中文</el-button>
        <el-button @click="jumpPage('about')">点我跳转！</el-button>
        <test></test>
        <p class="g-font-40 g-m-l-40">{{ t('name') }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import test from '@/components/test.vue'
import {useRouter} from "vue-router"
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
components: {
  test
}
const router = useRouter()

let changeLanguage = (val: string) => {
  locale.value = val
}

const jumpPage = (val:string) =>{
  router.push({
    name:val
  })
}

</script>

<style lang="scss" scoped>
.main-body {
  width: 100%;
  height: 100vh;
}
</style>
